<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font-family: "微软雅黑";
			font-size: 14px;
			color: #888888;
			font-weight: 800;
		}
		li{
			list-style: none;
		}
		.box{
			width: 310px;
			height: 246px;
			background: #9CD1EA url() 0 0 no-repeat;
			margin: 100px auto;
			border-radius: 3px;
			box-shadow: 0px 4px 0px #009DE4;
			padding-top: 20px;
			padding-left: 15px;
		}
		li{
			width: 66px;
			height: 36px;
			float: left;
			background: #fff url() 0 0 no-repeat;
			border-radius: 3px;
			text-align: center;
			line-height: 36px;
			margin-right: 10px;
			margin-bottom: 10px;
			box-shadow: 0px 4px 0px #78A7BC;
			cursor: pointer;
			position: relative;
			top: 0px;
		}
		li:hover{
			background: #9C89F6 url() 0 0 no-repeat;
			color: #fff;
		}
		.clear{
			background: #FF9FA8 url() 0 0 no-repeat;
			color: #fff;
			box-shadow: 0px 4px 0px #FF7C87;
		}
		.clear:hover{
			background: #F68991 url() 0 0 no-repeat;
		}
		.res{
			background: #F1FF92 url() 0 0 no-repeat;
			box-shadow: 0px 4px 0px #9DA853;
		}
		.res:hover{
			background: #ABB850 url() 0 0 no-repeat;
		}
		.suan{
			background: #FFF0F5 url() 0 0 no-repeat;
		}
		.show{
			background: #7CA8BB url() 0 0 no-repeat;
			color: #fff;
			text-align: right;
			font-size: 15px;
			padding-right: 5px;
			width: 213px;
			height: 40px;
			box-shadow: 0px 4px 0px #648797 inset;
		}
	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function  () {
			
			$('li').not('.show').mousedown(function(event) {
				$(this).animate({'top': '4px'}, 100);
				$(this).css('box-shadow','0px 0px 0px #78A7BC');
			});

			$('li').not('.show').mouseup(function(event) {
				$(this).animate({'top': '0px'}, 100);
				$(this).css('box-shadow','0px 4px 0px #78A7BC');
			});


			$('.clear').click(function(event) {
				$('.show').html('');
				show ="";
			});


			show = '';

			$('.num').click(function(event) {
				num = $(this).html();
				show +=num;
				$('.show').html(show);
			});


			$('.yusuan').click(function(event) {
				suan = $(this).html();
				show +=suan;
				$('.show').html(show);
			});

			$('.res').click(function(event) {
				
				show = eval(show);

				$('.show').html(show);

				show='';

			});








		})
	</script>
</head>
<body>
	<ul class="box">
		<li class="clear">c</li>
		<li class="show">0</li>
		<li class="num">7</li>
		<li class="num">8</li>
		<li class="num">9</li>
		<li class="yusuan">+</li>
		<li class="num">4</li>
		<li class="num">5</li>
		<li class="num">6</li>
		<li class="yusuan">-</li>
		<li class="num">1</li>
		<li class="num">2</li>
		<li class="num">3</li>
		<li class="yusuan">/</li>
		<li class="num">0</li>
		<li class="num">.</li>
		<li class="res">=</li>
		<li class="yusuan">*</li>
	</ul>
</body>
</html>